<template>
  <div>
    <div class="char_box_left">
      <div ref="echear_zhexian" style="width: 100%; height: 100%" />
      <div ref="echear_city" style="width: 100%; height: 100%" />
    </div>
    <div class="flex_more">
      <div class="yuan">
        <div class="yuan_header">
          合作点位数Top5
          <span><i class="el-icon-more" style="color: blue" /></span>
        </div>
        <div ref="char_yuan" style="width: 100%; height: 100%" />
        <div class="char_right">
          <div>
            <p>{{ Point }}</p>
            <span>点位数</span>
          </div>
          <div>
            <p>{{ Partnert }}</p>
            <span>点位数</span>
          </div>
        </div>
      </div>
      <div class="more">
        <div class="more_header">
          合作点位数Top5
          <span><i class="el-icon-more" style="color: blue" /></span>
          <!-- <div class="flrx_img">
            <img src="https://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt="">
            <p>暂无数据</p>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMonth, getyear, getright, getyuan, getPoint, getPartnert } from '@/api/lhbdashboard'
import { getCurrentTimeRange, getMonthnum, getYearnum, getCurrentWeekTimeRange } from '@/utils/date'
import { getnum } from '@/utils/dashboar'
import * as echarts from 'echarts'
export default {
  name: '',
  components: {},
  filters: {},
  props: {},
  data() {
    return {
      total: {},
      showX: [],
      timer: '',
      city: {},
      yuan: [],
      Point: 0,
      Partnert: 0
    }
  },
  computed: {},
  watch: {
    total(value) {
      this.echear_zhexian.setOption({
        title: {
          text: '销售额趋势',
          x: 'center',
          y: 'top'
        },
        xAxis: {
          type: 'category',
          data: this.showX
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: this.total.series,
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: 'red'
              }
            }
          }
        ]
      })
    },
    city(value) {
      this.echear_city.setOption({
        title: {
          text: '销售额分布',
          x: 'center',
          y: 'top'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.city.xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：元'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '10%',
            data: this.city.series
          }
        ]
      })
    },
    yuan(value) {
      this.char_yuan.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br>总占比({d}%)'
        },
        series: [
          {
            name: 'Area Mode',
            type: 'pie',
            radius: [20, 140],
            center: ['30%', '50%'],
            roseType: 'area',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 隐藏标示文字
                  formatter: `{b}\n{d}%`
                }
              }
            },
            data: this.yuan
          }
        ]
      })
    }
  },
  mounted() {
    this.echear_zhexian = echarts.init(this.$refs.echear_zhexian)
    this.echear_city = echarts.init(this.$refs.echear_city)
    this.char_yuan = echarts.init(this.$refs.char_yuan)
  },
  created() {
    this.showX = ['星期一', '星期二', '星期三', '星期四', '星期五']
    this.getMonth()
    this.getright()
    this.getyuan()
    this.getPoint()
    this.getPartnert()
  },
  methods: {
    async changetype(type) {
      console.log(type)
      if (type === 'week') {
        this.getMonth()
        this.getright()
      }
      if (type === 'month') {
        this.total = await getMonth(getMonthnum())
        this.city = await getright(getMonthnum())
        this.city.series = this.city.series.map(item => {
          return item / 100
        })
        this.showX = this.total.xAxis.map(item => {
          return (
            item.substring(6, 11).replace('0', '').replace('-', '月') + '日'
          )
        })
      }
      if (type === 'year') {
        this.total = await getyear(getYearnum())
        this.total.series = this.total.series.map(item => {
          return item / 100
        })
        this.city = await getright(getYearnum())
        this.city.series = this.city.series.map(item => {
          return item / 100
        })
        this.showX = this.total.xAxis
        console.log(this.total)
      }
    },
    // 可视化折线图销售e周
    async getMonth() {
      console.log(getCurrentTimeRange())
      console.log(getCurrentWeekTimeRange())
      this.showX = ['星期一', '星期二', '星期三', '星期四', '星期五']
      this.total = await getMonth(getCurrentTimeRange())
      this.timer =
        getCurrentTimeRange().start.replaceAll('-', '.') +
        '~' +
        getCurrentTimeRange().end.replaceAll('-', '.')
      this.$emit('toptimer', this.timer)
    },
    async getright() {
      this.city = await getright(getCurrentTimeRange())
      this.city.series = this.city.series.map(item => {
        return item / 100
      })
    },
    async getyuan() {
      const data = await getyuan()
      this.yuan = getnum(data)
      console.log(this.yuan)
    },
    // 获取点位数
    async getPoint() {
      this.Point = await getPoint()
    },
    async getPartnert() {
      this.Partnert = await getPartnert()
    }
  }
}
</script>

<style scoped lang="scss">
.char_box_left {
  height: 300px;
  display: flex;
  justify-content: space-between;
}
.yuan {
  position: relative;
  margin-top: 40px;
  padding: 20px;
  width: 720px;
  height: 353px;
  background-color: #fff;
}
.yuan_header {
  position: relative;
  height: 20px;
  width: 100%;
  span {
    position: absolute;
    right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    border-radius: 50%;
  }
}
.char_right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 47px;
  width: 154px;
  height: 230px;
  background-color: #f8f8f9;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  p{
    margin: 10px 0;
    padding: 0;
    color: #072074;
    font-weight: 600;
    font-size: 24px;
  }
  span{
    font-weight: 400;
    color: #000412;
    font-size: 12px;
  }
}
.more {
  position: relative;
  position: absolute;
  right: 0;
  top: 600px;
  margin-top: 40px;
  padding: 20px;
  width: 542px;
  height: 353px;
  background-color: #fff;
  background-color: #fff;
}
.more_header {
  span {
    position: absolute;
    right: 10px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    border-radius: 50%;
  };
  // .flrx_img{
  //   position: absolute;
  //   top:50%;
  //   left:50%;
  //   transform: translate(-50%,-50%);
  //   img{
  //     width: 123px;
  //     height: 96px;
  //   }

  // }
}
</style>
